/*
 * @Author: nainaiyi s15037075861@163.com
 * @Date: 2022-07-12 14:56:01
 * @LastEditors: nainaiyi s15037075861@163.com
 * @LastEditTime: 2022-09-05 14:20:12
 * @FilePath: \网站2001A尚盈盈7.12月考\demo\src\components\tabOne\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react'
import { Flex, Button, List } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import axios from "axios"
import "./tabOne.scss"
import { fetchDataAction } from '../../store/home/homeAction';
import { RootState } from '../../store';
import { useDispatch, useSelector } from "react-redux"

const TabOne: React.FC = () => {
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [pageCode, setpageCode] = useState(1)
    const [finished, setFinished] = useState<boolean>(false);
    const homeList = useSelector((state: RootState) => state.homeReducer.homeList)
    console.log(homeList)

    // 上拉加载
    const onLoad = async () => {
        const res = await axios.get("/api/home/list", {
            params: {
                pageCode: pageCode,
            }
        })
        if (res.data.code === 200) {
            dispatch(fetchDataAction(res.data.data))
            setpageCode(pageCode + 1)
        } else {
            setFinished(true)
        }
    }
    return (
        <div>
            <List finished={finished} onLoad={onLoad} finishedText="数据加载完毕">
                <div className="content">
                    {
                        homeList && homeList.map(v => {
                            return (
                                <dl key={v.id} className="dl" onClick={() => navigate("/detail/" + v.id)}>
                                    <dt>
                                        <img src={v.url} alt="" />
                                    </dt>
                                    <dd>
                                        <p style={{ color: "red" }}>￥<span>{v.price}</span></p>
                                        <p>{v.state}</p>
                                        <h4>{v.title}</h4>
                                        <p>{v.desc}</p>
                                    </dd>
                                </dl>

                            )
                        })
                    }
                </div>
            </List>

        </div>
    )
}

export default TabOne